<template>
	<view class="content">
        <!-- navbar -->
        <u-navbar :fixed="true" :safeAreaInsetTop="true" :placeholder="true"
            :shadow="true"  @leftClick="back" title="培训项目信息" >
        </u-navbar>

        <!-- 内容 -->
        <view class="uni-area">
            <!-- 培训项目 -->
            <view class="u-m-t-50 u-font-32 font-bold">培训项目</view>
            <view class="u-m-t-30 uni-shadow u-p-t-10" v-for="(tem,ind) in page.list" :key="ind">
                <u-row class="u-flex u-flex-wrap">
                    <u-col v-for="(item,index) in tem" :key="index" :span="(index+1)%2==0?7:5"
                        class="u-m-t-20 u-flex u-font-26" style="flex-direction:row">
                        <text class="u-m-r-16 uni-dec-color">{{item.title}}</text>
                        <uni-phone v-if="item.type=='phone'" :phone="item.value" :size="13"/>
                        <text v-else-if="item.type=='idcard'">{{$tools.formatIdentity(item.value)}}</text>
                        <text v-else>{{item.value}}</text>
                    </u-col>
                </u-row>
            </view>

            <!-- (暂未使用) -->
            <view v-if="1==2" class="u-m-t-30 uni-shadow">
                <view v-for="(item,index) in details" :key="index"
                    class="u-flex u-row-between u-font-28">
                    <text class="uni-gery-color">{{item.title}}</text>
                    <text>已完成</text>
                </view>
                <view class="u-m-t-30 u-flex u-row-between u-font-28">
                    <text class="uni-gery-color">参与培训人数</text>
                    <text>28人</text>
                </view>
            </view>
            <!-- 培训结果(暂未使用) -->
            <view v-if="1==2" class="u-m-t-50 u-flex u-row-between">
                <text class="u-font-32 font-bold">培训结果</text>
                <view class="u-flex u-row-right" style="max-width:72%" @tap.stop="screen.show=true">
                    <text class="u-m-r-10 u-font-26 uni-dec-color u-line-1">{{screen.label.replace(/\n/g,'')}}</text>
                    <u-icon name="arrow-down" size="13" color="#5D6672"></u-icon>
                </view>
            </view>
        </view>

        <!-- 返回顶部 -->
        <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
        <!-- 加载更多 -->
        <u-loadmore :status="page.status" />

        <!-- 培训项目筛选 -->
        <u-picker :show="screen.show" :columns="screen.data" keyName="label" :closeOnClickOverlay="true"
            @cancel="screen.show=false" @close="screen.show=false" @confirm="selectEnt">
        </u-picker>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
                // 培训详情(暂未使用)
                details:[ 
                    { filed:'xm', title:'姓名', value: 0 },
                    { filed:'zjhm', title:'身份证号码', value: 0 },
                    { filed:'lxfs', title:'联系电话', value: 0 },
                    { filed:'qdqz', title:'签到签字', value: 0 },	
                ],
                // 企业筛选
                screen:{
                    show: false,
                    label: '本次成绩',
                    value: 0,
                    data: [
                        [
                            { label: '本次成绩', value: 0 },
                            { label: '上次成绩', value: 1 },
                            { label: '测试这个地方文本过长在picker组件中的显示效果', value: 3 },
                        ]
                    ],
                },
			}
		},

        // 页面滚动
        onPageScroll(e){
            this.page.scrollTop = e.scrollTop
        },
        // 页面滚动到底部触发
        onReachBottom(){
            if( this.page.length < this.page.total ){
                this.paging.pageNum += 1
                this.getTrainDetail()
            }else{
                this.page.status = 'nomore'
            }
        },


		onLoad(option) {
            // 培训详情
            this.getTrainDetail(option.id)
            // 处理文本过长在picker中的显示问题
            this.screen.data.map((v,i)=>{
                v.map((a,b)=>{
                    if( a.label.length > 20 ){
                        a.label = this.$tools.transTwoArry(a.label,20).toString().replace(/,/g, '')
                    }
                })
            })
        },

        

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
          
            // 培训详情
            getTrainDetail(ywbh){
                this.page.status = 'loading'
                this.$request(this,this.$apis.TrainDetail, {ywbh:ywbh}).then(res=>{
                    // console.log('培训详情',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.page.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push([
                                { title:'姓名', value: v.xm },
                                { title:'证件号', value: v.zjhm, type:'idcard' },
                                { title:'电话', value: v.lxfs, type:'phone' },
                                { title:'签到签字', value: v.qdqz },	
                            ])
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$u.toast('暂无更多培训相关数据')
                    }
                }).then()
            },

            // 选择结果
            selectEnt(e){
                this.screen.label = e.value[0].label
                this.screen.value = e.value[0].value
                this.screen.show = false
            },

            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            },
		}
	}
</script>

<style lang="scss">
    // .content{}
</style>
